<template>
  <div class="lineTable-root">
    <el-scrollbar>
      <div class="lineTable-table">
        <div class="lineTable-column" :style="getColumnStyle({width:'30px'})" v-if="rowPrefixIcon">
          <div class="lineTable-header"></div>
          <div :class="['lineTable-value', `lineTable-hover-${i-1}`]" v-for="i in tableData.length" :key="i">
            <i :class="rowPrefixIcon"></i>
          </div>
        </div>
        <div class="lineTable-column" :style="getColumnStyle(header)" v-for="(header,index) in tableHeader" :key="index">
          <div class="lineTable-header" :style="getTableHVStyle(header)">{{header.name}}</div>
          <div :class="['lineTable-value', `lineTable-hover-${ind}`]" @mouseenter="rowHover(`lineTable-hover-${ind}`, 1)" @click="rowClick(item)"
               @mouseleave="rowHover(`lineTable-hover-${ind}`, 2)" :style="getTableHVStyle(header)" v-for="(item,ind) in tableData" :key="ind">
            <div v-if="header.type == 'slot'" style="width: 100%">
              <slot :name="header.prop" :row="item"></slot>
            </div>
            <div style="width: 100%" v-else>
              <el-tooltip effect="light" :content="`${item[header.prop]}`" placement="top">
                <div style="width: 100%" :style="getContentStyle(header)" :class="[contentHidden(header)]">
                  {{item[header.prop]}}
                </div>
              </el-tooltip>

            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'

  export default {
    name: 'lineTable',
    props: {
      rowPrefixIcon: {
        type: String,
        default: 'el-icon-document'
      },
      tableHeader: {
        type: Array,
        default: () => {
          return []
        }
      },
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    setup(props, content) {
      let data = reactive({})
      const getColumnStyle = ({ width, align }) => {
        let style = {}
        if (width) {
          style['flex-grow'] = 0
          style['flex-shrink'] = 0
          // style['flex-basis'] = width
          style['width'] = width
        }
        return style
      }

      const rowHover = (className, type) => {
        let domList = document.getElementsByClassName(className)

        if (!domList?.length) return
        Array.from(domList).forEach(cla => {
          if (type == 1) {
            cla.classList.add('row-hover')
          } else {
            cla.classList.remove('row-hover')
          }
        })
      }

      const rowClick = (row) => {
        content.emit('rowClick', row)
      }

      const contentHidden = (header) => {
        return 'content-hidden'
      }
      const getContentStyle = ({ align }) => {
        let style = { 'text-align': 'center' }
        if (align) {
          style['text-align'] = 'center'
        }
        return style
      }

      const getTableHVStyle = ({ align }) => {
        let style = {}
        if (align) {
          style['justify-content'] = alignConvert(align)
        }
        return style
      }

      return { ...toRefs(data), getColumnStyle, getTableHVStyle, rowHover, contentHidden, getContentStyle, rowClick }
    }
  }
  const alignConvert = (align) => {
    let jc
    switch (align) {
      case 'left':
        jc = 'flex-start'
        break
      case 'right':
        jc = 'flex-end'
        break
      default:
        jc = 'center'
    }
    return jc
  }
</script>

<style scoped lang="scss">
  .lineTable-root {
    height: 100%;

    .lineTable-table {
      display: flex;


      .lineTable-column {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;

        .lineTable-header, .lineTable-value {
          flex-basis: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom-style: dashed;
          border-bottom-width: 1px;

          &:hover {

            cursor: pointer;
          }
        }

        .lineTable-value {
          .content-hidden {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .row-hover {
          border-bottom-style: solid;
        }
      }
    }
  }
</style>
